<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';

const router = useRouter();

// 签到状态管理
const signStatus = ref('未签到');
const locationInfo = ref('');
const signTime = ref('');
const isLoading = ref(false);

// 底部导航配置
const tabItems = [
  {
    name: '假期批次',
    icon: '/static/tab1.png',
    url: '/pages/students/page1'
  },
  {
    name: '留校签到',
    icon: '/static/tab2.png',
    url: '/pages/students/page5'
  },
  {
    name: '更多功能',
    icon: '/static/tab3.png',
    url: '/pages/students/page6'
  }
];

const activeIndex = ref(1);

// 处理tab点击跳转
const handleTabClick = (index, url) => {
  if (index === activeIndex.value) return;
  activeIndex.value = index;
  uni.navigateTo({ url });
};

// 简化的签到处理函数
const handleSignIn = () => {
  if (signStatus.value === '已签到') {
    uni.showToast({ title: '您已完成签到', icon: 'none' });
    return;
  }

  isLoading.value = true;

  // 模拟签到过程
  setTimeout(() => {
    signStatus.value = '已签到';
    signTime.value = new Date().toLocaleString();
    locationInfo.value = '校内指定区域'; // 固定显示校内位置
    isLoading.value = false;

    // 显示成功弹窗
    uni.showToast({
      title: '签到成功',
      icon: 'success',
      duration: 1500
    });

    // 保存到本地存储
    uni.setStorageSync('signInfo', {
      status: '已签到',
      time: signTime.value,
      location: locationInfo.value
    });
  }, 800);
};

// 页面加载时检查签到状态并重置（用于演示）
onMounted(() => {
  // 清除本地存储的签到信息（仅用于演示）
  uni.removeStorageSync('signInfo');

  // 重新获取（此时应为空）
  const savedSign = uni.getStorageSync('signInfo');
  if (savedSign) {
    signStatus.value = savedSign.status;
    locationInfo.value = savedSign.location;
    signTime.value = savedSign.time;
  }
});
</script>

<template>
  <view class="sign-page">
    <!-- 顶部返回区域 -->
    <view class="back-area" @click="$router.push('/pages/students/page1')">
      <text class="back-icon">←</text>
      <text class="back-text">返回</text>
    </view>

    <!-- 页面标题 -->
    <text class="page-title">留校签到</text>

    <!-- 签到卡片 -->
    <view class="sign-card">
      <view class="sign-info">
        <text class="info-label">签到状态：</text>
        <text class="info-value" :class="signStatus === '已签到' ? 'signed' : 'unsigned'">
          {{ signStatus }}
        </text>
      </view>

      <view class="sign-info" v-if="signTime">
        <text class="info-label">签到时间：</text>
        <text class="info-value">{{ signTime }}</text>
      </view>

      <view class="sign-info" v-if="locationInfo">
        <text class="info-label">签到位置：</text>
        <text class="info-value">{{ locationInfo }}</text>
      </view>

      <button
          class="sign-btn"
          @click="handleSignIn"
          :loading="isLoading"
          :disabled="signStatus === '已签到'"
      >
        {{ isLoading ? '签到中...' : '立即签到' }}
      </button>
    </view>

    <!-- 底部导航 -->
    <view class="tabbar">
      <view
          class="tab-item"
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in tabItems"
          :key="index"
          @click="handleTabClick(index, item.url)"
      >
        <image :src="item.icon" class="tab-icon" />
        <text class="tab-text">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
/* 样式保持与其他页面一致，此处省略重复样式 */
.sign-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 60px;
}

.back-area {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
}
.back-icon {
  font-size: 22px;
  color: #409eff;
  margin-right: 8px;
}
.back-text {
  font-size: 16px;
  color: #409eff;
  font-weight: 500;
}

.page-title {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 15px 0;
}

.sign-card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin: 0 15px 15px;
}

.sign-info {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.info-label {
  font-size: 14px;
  color: #666;
  min-width: 80px;
  padding-top: 2px;
}

.info-value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

.signed {
  color: #52c41a; /* 已签到绿色 */
}

.unsigned {
  color: #faad14; /* 未签到橙色 */
}

.sign-btn {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background-color: #409eff;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  margin-top: 10px;
}

/* 底部导航样式 */
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.tab-item.active .tab-text {
  color: #409eff;
}

.tab-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.tab-text {
  font-size: 12px;
  color: #999;
}
</style>